<template>
  <div class="main">
    <!-- 使用 t('confList.meetingListTitle') 获取翻译文本 -->
    <div class="title">{{ t('confList.meetingListTitle') }}</div>

    <div class="search-area">
      <div class="searchinput-area">
        <el-select
          v-model="searchType"
          default-first-option
          size="large"
          class="custom-select"
        >
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
        <el-input
          v-model="searchInput"
          :placeholder="searchType === '会议号' ? t('confList.meetingListSearchPlaceholder') : t('confList.meetingListSearchPlaceholder')"
          class="search-input"
        >
          <template #append>
            <el-button @click="handleSearch" type="primary">
              <el-icon><Search /></el-icon>
              {{ t('confList.meetingListSearchButton') }}
            </el-button>
          </template>
        </el-input>
      </div>

      <div>
        <el-button type="primary" class="schedule-btn" @click="toJoin">
          <el-icon><Plus /></el-icon>
          {{ t('confList.meetingListAddButton') }}
        </el-button>
        <el-button type="primary" class="schedule-btn" @click="toCreate">
          <el-icon><EditPen /></el-icon>
          {{ t('confList.meetingListStartButton') }}
        </el-button>
      </div>
    </div>

    <div class="table-container">
      <el-table
        :data="tableData"
        style="width: 100% "
        :header-cell-style="headerStyle" 
        :row-class-name="tableRowClassName"
        empty-text=""
      >
        <el-table-column label="预定开始时间" prop="startTime" sortable>
          <template #default="scope"> 
            <div class="time-cell">
              <el-icon><Timer/></el-icon>
              <span>{{ scope.row.startTime }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="会议主题" prop="subject">
          <template #default="scope"> 
            <div class="subject-cell">
              <el-icon><Document /></el-icon>
              <span>{{ scope.row.subject }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="会议号" prop="meetingId">
          <template #default="scope"> 
            <el-tag size="small" effect="plain">{{ scope.row.meetingId }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="会议状态" prop="status">
          <template #default="scope">
            <el-tag :type="getStatusTagType(scope.row.status)" size="small"> 
              {{ t(`confList.meetingList${scope.row.status}`) }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="200">
          <template #default="scope">
            <el-button type="primary" link size="small">
              <el-icon><View /></el-icon>
              {{ t('confList.meetingListViewDetails') }}
            </el-button>
            <el-button type="danger" link size="small">
              <el-icon><Delete /></el-icon>
              {{ t('confList.meetingListDelete') }}
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <div v-if="!tableData.length" class="empty-state">
        <el-empty description="目前暂无会议安排" :image-size="200"></el-empty>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">

import { ref } from 'vue'
import {t} from '../../../locales/index'
import { Search, Plus, EditPen ,Timer,Document,View ,Delete} from '@element-plus/icons-vue'
import { useRouter } from 'vue-router';
const searchInput = ref('')
const searchType = ref('会议号')
const router=useRouter()

const options = [
  {
    value: '会议号',
    label: '会议号',
  },
  {
    value: '会议主题',
    label: '会议主题',
  },
]

const tableData = ref([
  {
    startTime: '2024-02-01 14:00',
    subject: '产品研发会议',
    meetingId: 'M202402001',
    status: '已结束',
  },
  {
    startTime: '2024-02-02 10:00',
    subject: '周会',
    meetingId: 'M202402002',
    status: '已开始',
  },
  {
    startTime: '2024-02-01 14:00',
    subject: '产品研发会议',
    meetingId: 'M202402001',
    status: '已结束',
  },
  {
    startTime: '2024-02-02 10:00',
    subject: '周会',
    meetingId: 'M202402002',
    status: '未开始',
  },
])

const headerStyle = {
  background: '#f5f7fa',
  color: '#606266',
  fontWeight: 600,
  height: '50px'
}


const tableRowClassName = ({ rowIndex }: { rowIndex: number }) => {
  return rowIndex % 2 === 0 ? 'even-row' : 'odd-row';
};


const getStatusTagType = (status: string) => {
  switch (status) {
    case '未开始':
      return 'info'
    case '已开始':
      return 'success'
    case '已结束':
      return 'danger'
    default:
      return 'warning'
  }
}

const handleSearch = () => {
  console.log('Searching:', searchInput.value)
}

const toJoin=()=>{
  router.push('/home/myConf/list/join')
}
const toCreate=()=>{
  router.push('/home/myConf/list/create')
}
</script>

<style scoped lang="scss">
.main {
  padding: 20px 2vw;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);

  .title {
    margin-bottom: 30px;
    font-size: 2rem;
    font-weight: 600;
    color: #303133;
    position: relative;
    padding-left: 15px;

    &::before {
      content: '';
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      width: 4px;
      height: 20px;
      background: var(--el-color-primary);
      border-radius: 2px;
    }
  }

  .search-area {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
    .searchinput-area {
      display: flex;
      align-items: center;

      .custom-select {
        width: 110px;

        :deep(.el-input__wrapper) {
          border-radius: 4px;
          box-shadow: 0 0 0 1px #dcdfe6 inset;
          transition: all 0.3s ease;

          &:hover {
            box-shadow: 0 0 0 1px var(--el-color-primary) inset;
          }

          &.is-focus {
            box-shadow: 0 0 0 1px var(--el-color-primary) inset;
          }
        }
      }

      .search-input {
        width: 400px;

        :deep(.el-input__wrapper) {
          border-radius: 4px;
          box-shadow: 0 0 0 1px #dcdfe6 inset;
          transition: all 0.3s ease;

          &:hover {
            box-shadow: 0 0 0 1px var(--el-color-primary) inset;
          }

          &.is-focus {
            box-shadow: 0 0 0 1px var(--el-color-primary) inset;
          }
        }
      }
      :deep(.el-input-group__append) {
        padding: 0;

        .el-button {
          border: none;
          height: 40px;
          width: 100px;
          padding: 0 20px;
          border-radius: 0 4px 4px 0;

          .el-icon {
            margin-right: 4px;
          }
        }
      }
    }
  }

  .schedule-btn {
    margin-left: 20px;

    font-weight: 500;

    .el-icon {
      margin-right: 6px;
    }

    &:hover {
      transform: translateY(-1px);
      box-shadow: 0 4px 12px rgba(var(--el-color-primary-rgb), 0.3);
    }
  }

  .table-container {
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid #ebeef5;
    font-size: 16px;

    :deep(.el-table) {
      .even-row {
        background: #fafafa;
      }

      .odd-row {
        background: #ffffff;
      }

      tr {
          height: 4rem;
          font-size: 1.2rem;
      }

      td {
        height: 4rem;
        font-size: 16px;
      }
      .el-tag{
        font-size: 14px; /* 会议号标签字体大小 */
      }
      .el-button{
        font-size: 14px;
      }
    }
  }

  .time-cell,
  .subject-cell {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .empty-state {
    margin: 100px 0;

    .empty-btn {
      padding: 12px 24px;
      font-weight: 500;

      .el-icon {
        margin-right: 6px;
      }
    }
  }

  .el-button {
    transition: all 0.3s ease;
  }

  .el-table {
    transition: all 0.3s ease;
  }
}
</style>